 <template>
    <div class="edit">
        <van-field
            label="收货人"
            :value="form.receiver"
            @change="changeReceiver"
            placeholder="姓名"
        />
        <van-field
            label="手机号码"
            :value="form.mobile"
            @change="changeMobile"
            placeholder="11位手机号码"
        />
        <van-cell is-link>
            <view slot="title">
                <picker
                    :value="val"
                    mode="multiSelector"
                    range-key="areaName"
                    :range="[province_list, city_list, county_list]"
                    @columnchange="columnchange"
                    >所在地区
                    <span class="sp">{{
                        form.province + " " + form.city + " " + form.area
                    }}</span>
                </picker>
            </view>
        </van-cell>
        <van-field
            label="详情地址"
            :value="form.addr"
            placeholder="如楼号/单元/门牌号"
            @change="changeAddr"
        />
        <div class="btn-box">
            <div class="btn" @click="saveAddress">保存收货地址</div>
            <div class="btn del" @click="delAddress" v-show="status">
                删除收货地址
            </div>
            <van-dialog
                title="确认要删除此收货地址吗？"
                :show="show"
                show-cancel-button
                @confirm="del"
                @cancel="closeshow"
            >
            </van-dialog>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import {
    getlistByPid,
    addAddr,
    addrInfo,
    updateAddr,
    deleteAddr,
} from "@/services/index";
export default {
    data() {
        return {
            status: false, //删除按钮是否显示
            county_list: [], //省市区列表
            city_list: [],
            province_list: [],
            val: [0, 0, 0], //三级菜单值
            show: false, //对话框是否显示
            addrId: 0,
            citycount: true,
            areacount: true,
            //用户数据
            form: {
                provinceId: "",
                cityId: "",
                areaId: "",
                receiver: "",
                mobile: "",
                addr: "",
                province: "",
                city: "",
                area: "",
                userType: 0,
            },
        };
    },
    computed: {
        ...mapState("address", ["listByPid"]),
    },
    watch: {
        // 省市联动
        async "form.provinceId"(value) {
            // 当省的数据发生改变时 去请求市的数据
            let result = await getlistByPid(value);
            this.city_list = result;
            // 通过设置的id来查找对应的省的名字
            if (this.province_list.length !== 0) {
                this.form.province = this.province_list.find(
                    (v) => v.areaId === this.form.provinceId
                ).areaName;
            }
            // 如果addrId存在 则表明是编辑地址
            if (this.addrId) {
                if (this.citycount) {
                    // 如果citycount为true，则表明是首次进入页面 需要返显列表
                    this.val[1] = this.city_list.findIndex(
                        (v) => v.areaId === this.form.cityId
                    );
                    this.citycount = false;
                } else {
                    // 如果citycount为false  则表明是滑动省列表时改变的省 要把市重置为第一个
                    this.form.cityId = result[0].areaId;
                    this.val[1] = 0;
                }
            } else {
                // 如果addrId不存在 则表明是新增收货地址 则把市重置为第一个并改变cityid
                this.form.cityId = result[0].areaId;
                this.val[1] = 0;
            }
        },
        // 市 区联动
        async "form.cityId"(value) {
            // 当市的数据发生改变时 去请求区的数据
            let result = await getlistByPid(value);
            this.county_list = result;
            // 通过设置的id来查找对应的市的名字
            if (this.city_list.length !== 0) {
                this.form.city = this.city_list.find(
                    (v) => v.areaId === this.form.cityId
                ).areaName;
            }
            // 如果addrId存在 则表明是编辑地址
            if (this.addrId) {
                if (this.areacount) {
                    // 如果areacount为true，则表明是首次进入页面 需要返显列表
                    this.val[2] = this.county_list.findIndex(
                        (v) => v.areaId === this.form.areaId
                    );
                    this.areacount = false;
                } else {
                    // 如果areacount为false  则表明是滑动市列表时改变的市 要把区重置为第一个
                    this.form.areaId = result[0].areaId;
                    this.val[2] = 0;
                }
            } else {
                // 如果addrId不存在 则表明是新增收货地址 则把区重置为第一个并改变areaId
                this.form.areaId = result[0].areaId;
                this.val[2] = 0;
            }
        },
        // 监听areaId 改变区的名字
        "form.areaId"(value) {
            if (this.county_list.length !== 0) {
                this.form.area = this.county_list.find(
                    (v) => v.areaId === this.form.areaId
                ).areaName;
            }
        },
    },
    methods: {
        ...mapActions("address", ["getlistByPid"]),
        // 三级菜单改变事件
        async columnchange({ target: { value, column } }) {
            switch (column) {
                case 0:
                    this.val[0] = value;
                    this.form.provinceId = this.province_list[value].areaId;
                    break;
                case 1:
                    this.val[1] = value;
                    this.form.cityId = this.city_list[value].areaId;
                    break;
                case 2:
                    this.val[2] = value;
                    this.form.areaId = this.county_list[value].areaId;
                    break;
                default:
                    break;
            }
        },
        // 保存收货地址
        async saveAddress() {
            let obj = { ...this.form };
            if (this.status) {
                obj.addrId = this.addrId;
                await updateAddr(obj);
            } else {
                obj.addrId = 0;
                await addAddr(obj);
            }
            wx.navigateTo({
                url: "../delivery-address/index",
            });
        },
        // 删除地址
        delAddress() {
            this.show = true;
        },
        // 关闭弹窗
        closeshow() {
            this.show = false;
        },
        // 确认删除
        del() {
            deleteAddr(this.addrId);
            wx.navigateTo({
                url: "../delivery-address/index",
            });
        },
        // 双向绑定收货人 手机和 地址
        changeReceiver({ detail }) {
            this.form.receiver = detail;
        },
        changeMobile({ detail }) {
            this.form.mobile = detail;
        },
        changeAddr({ detail }) {
            this.form.addr = detail;
        },
    },
    async mounted() {
        let { addrId } = this.$mp.query;
        this.status = !!addrId;
        // 请求省列表
        let result = await getlistByPid(0);
        this.province_list = result;
        // 如果addrId存在则是修改地址
        if (addrId) {
            let res = await addrInfo(addrId);
            this.addrId = res.addrId;
            this.val[0] = this.province_list.findIndex(
                (v) => v.areaId === res.provinceId
            );
            // 数据返显
            this.form = { ...this.form, ...res };
        } else {
            // addrId不存在则是新增地址
            this.form.provinceId = result[0].areaId;
        }
    },
};
</script>

<style scoped>
.btn {
    width: 60%;
    height: 80rpx;
    line-height: 80rpx;
    margin: 20rpx auto;
    text-align: center;
    border: 1rpx solid #eb2444;
    border-radius: 50rpx;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.3);
    color: #fff;
    background-color: #eb2444;
    font-size: 30rpx;
}
.del {
    margin-top: 40rpx;
    color: #eb2444;
    background-color: #f8f0f1b6;
}
.btn-box {
    width: 100%;
}
.sp {
    margin-left: 100rpx;
}
</style>
